<template>
	<div class="content-teacher" v-loading="loadingLesson">
    <div class="content-lesson">
      <div class="lesson" v-for="(lesson, index) in red_tabs_show" :key="lesson.colId">
        <div class="header" @click="getLessonList(lesson, index)">
          {{ lesson.colClassName }}
        </div>
        <div class="list" v-if="redLessonss.length && index == lessonIndex">
					<span class="item" @click="onClickLesson(index)" v-for="(item, index) in redLessonss" :key="item.colId">
						{{ item.colTitle }}
					</span>
        </div>
      </div>
    </div>
<!--    <div class="row">
      <div class="col-md-12">


      </div>
      <div class="col-md-12">

      </div>
    </div>-->
    <div class="lesson-more">
      <span v-if="red_tabs_show.length<=1" style="font-size: 18px;cursor: pointer;color: red" @click="loadMore">更多>></span>
    </div>

		<div class="lesson-pic-content" v-if="redLessonss && redLessonss.length">
			<!-- red_tabs[0].bizAttachList -->
			<div class="lesson-pic" v-for="(item, index) in redLessonss" :key="item.colId" @click="onClickLesson(index)">
				<img :src="item.colCoverImg" />
			</div>
		</div>
		<div class="preview-img" v-if="currentIndex != -1 && isDisplay==true"  @click.stop>
			<img :src="redLessonss[currentIndex].colCoverImg" />
		</div>
    <div @click="isDisplay = false" v-show="isDisplay" class="mask"></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			red_tabs: [],
      //需要展示的
      red_tabs_show :[],
			redLessonss: [],
			currentIndex: -1, // 课程点击索引
			lessonIndex: -1, // 课程标题点击索引
			loadingLesson: false,
      isDisplay: false,
		}
	},
	created() {
		this.getextclasslistbytypecode()
	},
	methods: {
    /**
     * 加载更多
     */
    loadMore(){
      this.loadingLesson = true
      this.red_tabs_show = [];
      this.$api.articletype.getextclasslistbytypecode(this.$globalDict.articleCode.teacherspeak).then((article) => {
        const { code, rows } = article.data
        if (code == 200) {
          if (Array.isArray(rows)) {
            console.log('getextclasslistbytypecode', rows)
            this.red_tabs_show = rows||[];
            if(rows!=null && rows.length>0){
              //this.red_tabs_show.push(rows[0])
              this.getLessonList(rows[0], 0);
            }

          }
        }
      }).finally(() => {
        this.loadingLesson = false
      })
    },
		// 获取师说红课列表
		getextclasslistbytypecode() {
			this.loadingLesson = true
      this.red_tabs_show = [];
			this.$api.articletype.getextclasslistbytypecode(this.$globalDict.articleCode.teacherspeak).then((article) => {
				const { code, rows } = article.data
				if (code == 200) {
					if (Array.isArray(rows)) {
						console.log('getextclasslistbytypecode', rows)
						this.red_tabs = rows;
            if(rows!=null && rows.length>0){
              this.red_tabs_show.push(rows[0])
              this.getLessonList(rows[0], 0);
            }

					}
				}
			}).finally(() => {
				this.loadingLesson = false
			})
		},
		// 获取课程列表
		getLessonList(article, index) {
			this.loadingLesson = true
			this.resetIndex()
			this.$api.articletype
				.getArticleLlist({
					articleType: article.colTypeId,
					// pageSize: 24,
					// pageNum: 1,
				})
				.then((res) => {
					const { code, rows } = res.data
					if (code == 200) {
						if (Array.isArray(rows) && rows.length > 0) {
              console.log(rows);
							this.redLessonss = rows.filter(r=>r.colExtClass!='' && String(r.colExtClass) == String(article.colId)) ||[];
							this.lessonIndex = index
							console.log('师说红课', this.red_tabs)
						}
					}
				})
				.catch((error) => {})
				.finally(() => {
					this.loadingLesson = false
				})
		},
		resetIndex(lesson, index) {
			this.currentIndex = -1
			this.lessonIndex = -1
		},
		onClickLesson(index) {
			this.currentIndex = index
      this.isDisplay = true
		},
	},
}
</script>

<style lang="scss" scoped>

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;

}
.content-teacher {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	height: 80vh;
	padding-bottom: 50px;

	.content-lesson {
		flex: 1;
		overflow-y: auto;
		//margin-bottom: 50px;

		.lesson {
			.header {
				color: black;
				font-size: 22px;
				flex-shrink: 0;
				cursor: pointer;
				margin-bottom: 15px;
        font-family: 等线;
			}

			.list {
				margin-left: 30px;
				display: flex;
				flex-direction: column;
				flex: 1;
				/*width: 500px;*/

				.item {
					font-size: 18px;
					line-height: 44px;
					color: $mainColor;
					cursor: pointer;
				}

				.active {
					border-bottom: 3px solid $mainColor;
				}
			}
		}
	}

  .lesson-more{
    width: 100%;
    margin-bottom:25px;
    display: flex;
    justify-content: flex-end;
    margin-right: 35px;
  }

	.lesson-pic-content {
		display: flex;
		flex-direction: row;
		overflow-y: auto;
		width: 100%;

		.lesson-pic {
			width: 160px;
			height: 200px;
			flex-shrink: 0;

			img {
				width: 100%;
				height: 100%;
				object-fit: fill;
			}

			&:not(:first-child) {
				margin-left: 0px;
			}
		}
	}

	.preview-img {
		position: absolute;
		top: 0;
		right: 20%;
		width: 50vh;
		height: 65vh;
		z-index: 999;
    box-shadow: 10px 10px 50px 10px rgba(0, 0, 0, 0.5);

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}
</style>
